<!DOCTYPE html>
<html>
<head>
    <th:block th:include="include :: header('锁屏')"/>
    <style>
        .class-demo-layer-lockscreen{
            height: calc(100vh - 20px);
            background: url(/admin/images/00001.png) #16b777; background-size: cover; color: rgba(255,255,255,1);}
        .class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
        .class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}
        .class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
        .class-demo-layer-lockscreen .layui-input-suffix{pointer-events: auto; background-color: rgba(0,0,0,.5); border-radius: 0 3px 3px 0;}
        .class-demo-layer-lockscreen .layui-input-suffix .pear-icon-unlock{cursor: pointer; color: #fff;}
    </style>
</head>
<body class="pear-container">
<div class="class-demo-layer-lockscreen">
    <div class="layui-form">
        <div class="layui-input-wrap">
            <input type="password" class="class-demo-layer-pin" lay-affix="eye" />
            <div class="layui-input-suffix">
                <i class="layui-icon pear-icon pear-icon-unlock" lay-on="unlock"></i>
            </div>
        </div>
        <div>输入 20242024 后回车，即可退出锁屏</div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'jquery','util'], function () {
        let form = layui.form;
        let util = layui.util;
        let $ = layui.jquery;
        form.render();
        let input = $("input")
        input.focus();
        var PASS = '20242024';

        util.on({
            unlock: function () {
                unlock()
            }
        })

        input.on('keyup', function(e){
            var elem = this;
            var keyCode = e.keyCode;
            if(keyCode === 13){
                unlock()
            }
        });

        function unlock (){
            if($.trim(input[0].value) === PASS){
                window.localStorage.setItem("mvip_tools_lock",'false')
                parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
            }
            else{
                layer.msg('锁屏密码输入有误', {offset: '16px', anim: 'slideDown'})
                input.focus();
            }
        }

    })
</script>
</body>
</html>
